<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport"
			content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
		<title>餐费管理</title>

		<!-- 引入样式文件 -->
		<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@4/lib/index.css" /> -->
		<link rel="stylesheet" href="/wechat/css/vantIndex.css">

		<!-- 自定义样式 -->
		<style>
			body {
				background-color: #f3f3f3;
				overflow: hidden;
				font-size: 10px;
			}

			#app {

			}
			.content-div {
				background-color: #fff;
				margin: 1rem;
				border-radius: 20px;
				box-shadow: 0 5px #e6e6e6;
			}

			.filter-div {
				text-align: center;
				display: flex;
				justify-content: center;
				padding: 0.6rem 0.7rem;
				border: 1px solid #2382fd;
				color: #2382fd;
				font-weight: bold;
				border-radius: 10px;
			}
			.educational-head {
				width: 85%;
			}
			.content-box {
				display: block;
				overflow: auto;
				height: 40rem;
			}
			.title {
				color: #1b1615;
				font-size: 0.8rem;
				height: 34px;
				line-height: 34px;
				
			}
			.van-col {
				text-align: center;
			}
			
			.backtn-div {
				font-size: 1.4rem;
				padding: 0.4rem 0.6rem;
				background-color: #ffc526;
			}
		</style>
	</head>

	<body style="font-size: 12px;">
		<div id="app">
			<div class="backtn-div">
				<van-icon name="arrow-left" @click="goBack" />
			</div>
			<div>
				<van-search v-model="searchValue" @blur="onSearch" shape="round" background="linear-gradient(to right, #ffc526, #ffa248)" placeholder="请输入学生姓名查询" />
			</div>
			<div class="content-div">
				<div class="filter-div">
					<div class="educational-head" >
						<van-row type="flex" justify="space-around">
							<van-col span="4">
								序号
							</van-col> 
							<van-col span="5">
								学生姓名
							</van-col> 
							<van-col span="5">
								已报午餐</br>
								未收费
							</van-col> 
							<van-col span="5">
								已报晚餐</br>
								未收费
							</van-col> 
							<van-col span="5">
								查看
							</van-col> 
						</van-row>
					</div>
				</div>
				<div class="content-box">
					<!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh" > -->
					<van-list
					  v-model:loading="loading"
					  :finished="finished"
					  finished-text="没有更多了"
					  @load="onToLoad"
					>
					  <van-cell v-for="(item, index) in list" :key="index" >
						<div style=" border-radius: 10px; padding: 0.2rem 0.4rem; margin: 1px 0; background-color: #ffedbd; ">  
						<van-row type="flex" justify="space-around">
							<van-col span="4" >
								<div class="title">{{index + 1}}</div>
							</van-col> 
							<van-col span="5">
								<div class="title">{{item.name}}</div>
							</van-col> 
							<van-col span="5">
								<div class="title">{{item.totalLunch}}</div>
							</van-col> 
							<van-col span="5">
								<div class="title">{{item.totalDinner}}</div>
							</van-col> 
							<van-col span="5">
								<div><van-button @click="goUrl('mealsDetails.html?studentId=' + item.studentId)" round style="color: #ef5d51; height: 30px; border: 1px solid #ef5d51;" color="linear-gradient(to bottom, #fffbff, #f7d1bf) #ef5d51">查看</van-button></div>
							</van-col>
						</van-row>
						</div>
					  </van-cell>
					</van-list>
					<!-- </van-pull-refresh> -->
				</div>
			</div>




		</div>

		<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<!-- 		<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
		<script src="https://cdn.jsdelivr.net/npm/vant@4/lib/vant.min.js"></script> -->
		<script src="/wechat/js/vue@3.js"></script>
		<script src="/wechat/js/vant.min.js"></script>
		
		<script src="/scriptZIP/axios.min.js"></script>
			<!-- <script src="/js/common.js"></script> -->


		<script>
			
			// 初始化 Vue 实例
			const app = Vue.createApp({
				data() {
					return {
						searchValue: '',
						loading: true,
						finished: false,
						list: [],
						studentStatus: '在读',
						schoolId: '',
						refreshing: false,
						pageNum: 1,
						pageSize: 10,
						OjbList: {}
						
					};
				},
				created: function () {
					this.schoolId = localStorage.getItem('schoolId');
					this.getList()

				},
				methods: {
					filterclick(st) {
						this.studentStatus = st;
						this.list = []
						this.pageNum = 1
						 // this.finished = false;
						this.getList()
					},
					onToLoad() {
						this.loading = true;
						  setTimeout(() => {
							// if (this.refreshing) {
							//   this.list = [];
							//   this.refreshing = false;
							// }
							// this.refreshing = false;
							// for (let i = 0; i < 10; i++) {
							//   this.list.push(this.list.length + 1);
							// }
							this.loading = false;
							  this.finished = true;
							// this.pageNum += 1;
							// this.pageNum += 1;

							this.getList()
					
					// 		if (this.list.length >= 40) {
					// 		  finished.value = true;
					// 		}
						  }, 1000);
					},
					onRefresh() {
						this.Loading = true;
						this.finished = false;
						this.pageNum = 1;
						this.list = [];
						this.onToLoad()
						
					},
					goUrl(url) {
						window.location = url
					},
					goBack() {
						history.back();
					},
					onSearch() {
						this.list = []
						this.refreshing = true
						this.pageNum = 1
						this.getList()
					},
					getList() {
						axios.get('/t/mealReservation/getMealCount', {
							params: { schoolId: this.schoolId, name: this.searchValue,  pageNum: this.pageNum, pageSize: this.pageSize  }
						}).then(function (res) {
							this.OjbList = res.data
							 res.data.list.forEach(item => {
								this.list.push(item)
							});
							this.loading = false;
							this.finished = true;
							if (this.list.length >= this.OjbList.total) {
							  this.finished = true; // 没有更多数据了
							} else {
							  this.finished = false;
							  this.pageNum++;
							}
							 // this.finished = true; // 没有更多数据了
							// console.log('33344', this.list.length, res.data.total)
							// if (this.list.length >= res.data.total) {
							//   this.finished = true; // 没有更多数据了
							// } else {
							//   this.pageNum += 1;
							//   }
						}.bind(this));
					},
					enterShop() {
						vant.Toast("进入店铺");
					},

				},
			});

			app.use(vant);
			app.mount("#app");
		</script>
	</body>
</html>